<script setup>
import BaseSon from '@/components/8插槽/1.基本插槽.vue'
import NameSon from '@/components/8插槽/2.具名插槽.vue'
import IfSon from '@/components/8插槽/3.条件插槽.vue'
import ScopeSon from "@/components/8插槽/4.作用域插槽.vue"

let name = "lisi"
let slotName = "header"


</script>

<template>
  <BaseSon>
    {{ name }}
    zhangsan
  </BaseSon>

  <hr>
  <NameSon>
    <template v-slot:[slotName]>
      zhangsan
    </template>

    <!--    <template #default>-->
    <!--      lisi-->
    <!--    </template>-->
    <!--    如果是默认的插槽则可以不写  没有顺序-->

    <!--    简化写法-->
<!--    <template #footer>-->
<!--      wangwu-->
<!--    </template>-->

    <span>hello</span>
    lisi

  </NameSon>
  <hr>

  <IfSon>
    <template v-slot:header>
      zhangsan
    </template>

    <template v-slot:default>
      lisi
    </template>
  </IfSon>
  <hr>
  <!--  插槽传入的数据直接定一个变量即可-->

  <!--  默认作用域插槽-->
  <ScopeSon v-slot="obj">
    {{ obj.count }}
  </ScopeSon>

  <ScopeSon v-slot="{count}">
    {{ count }}
  </ScopeSon>

  <!--  具名作用域插槽-->
  <!--  如果具名和默认同时使用要加上模版标签-->
  <hr>
  <ScopeSon>
    <template v-slot:header="{count}">
      {{ count }}
    </template>

<!--    <template #header="{count}">-->
<!--      {{ count }}-->
<!--    </template>-->
  </ScopeSon>

</template>


<style scoped>

</style>
